<template>
  <div class="heal-guidance-program">
    <div class="my-program">
      <div class="cons-item">
        <div class="main-item">
          <div class="m-header">我的方案</div>
          <div class="con">
            <div class="name">
              <span>运动目标</span>
              <span class="name-str">减肥</span>
            </div>
            <div class="remark">
              <div class="rmk-tit">注意事项</div>
              <div class="desc">
                （1）所有动作需要在保证安全的前提下保证质量，避免运动损伤。
                （2）锻炼前进行10～15min热身和准备活动。
                （3）锻炼后进行10～15min静态牵拉和整理活动。
                （4）注意循序渐进，根据身体适应情况调整强度和难度。
                （5）注意合理饮食，合理补充营养。多吃水果、蔬菜和富含蛋白质的食物。
                （6）合理安排作息时间和生活方式，日常生活要有规律。
              </div>
            </div>
          </div>
        </div>
        <div class="item-response">
          <div class="sub-items">
            <div class="sub-item">
              <div class="s-header">
                <span>第一天</span>
                <span class="total-week">共三天</span>
              </div>
              <div class="childrens">
                <div class="child-item">
                  <div class="con">
                    <div class="icon-h-row">
                      <div class="img-box">
                        <img src="../../../assets/img/motion_icon.png" alt="">
                      </div>
                      <div class="str-box">
                        <span class="name">运动项目</span>
                        <span class="name-str">跳绳</span>
                      </div>
                    </div>
                    <div class="desc-items">
                      <div class="field">
                        <span class="label">运动强度</span>
                        <span class="val">中</span>
                      </div>
                      <div class="field">
                        <span class="label">运动时长（分钟）</span>
                        <span class="val">30</span>
                      </div>
                      <div class="field">
                        <span class="label">每次个数（个）</span>
                        <span class="val">150</span>
                      </div>
                  <!--<div class="field">
                    <span class="label">每周频率（次/周）</span>
                    <span class="val">5</span>
                  </div> -->
                    </div>
                  </div>
                </div>
                <!-- <div class="child-item">
                  <div class="con">
                    <div class="icon-h-row">
                      <div class="img-box">
                        <img src="../../../assets/img/motion_icon.png" alt="">
                      </div>
                      <div class="str-box">
                        <span class="name">运动项目</span>
                        <span class="name-str">跳绳</span>
                      </div>
                    </div>
                    <div class="desc-items">
                      <div class="field">
                        <span class="label">运动强度</span>
                        <span class="val">高</span>
                      </div>
                      <div class="field">
                        <span class="label">运动时长（分钟）</span>
                        <span class="val">85</span>
                      </div>
                      <div class="field">
                        <span class="label">每次个数（个）</span>
                        <span class="val">200</span>
                      </div>
                      <div class="field">
                        <span class="label">每周频率（次/周）</span>
                        <span class="val">4</span>
                      </div>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="sub-item">
              <div class="s-header second-bg">
                <span>第二天</span>
                <span class="total-week">共三天</span>
              </div>
              <div class="con">
                <div class="icon-h-row">
                  
                      <div class="img-box">
                        <img src="../../../assets/img/motion_icon.png" alt="">
                      </div>
                  <div class="str-box">
                    <span class="name">运动项目</span>
                    <span class="name-str">跳绳</span>
                  </div>
                </div>
                <div class="desc-items">
                  <div class="field">
                        <span class="label">运动强度</span>
                        <span class="val">中</span>
                    </div>
                    <div class="field">
                      <span class="label">运动时长（分钟）</span>
                      <span class="val">30</span>
                    </div>
                    <div class="field">
                      <span class="label">每次个数（个）</span>
                      <span class="val">150</span>
                    </div>
                  <!--<div class="field">
                    <span class="label">每周频率（次/周）</span>
                    <span class="val">5</span>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="s-header third-bg">
                <span>第三天</span>
                <span class="total-week">共三天</span>
              </div>
              <div class="con">
                <div class="icon-h-row">
                  
                      <div class="img-box">
                        <img src="../../../assets/img/motion_icon.png" alt="">
                      </div>
                  <div class="str-box">
                    <span class="name">运动项目</span>
                    <span class="name-str">跳绳</span>
                  </div>
                </div>
                <div class="desc-items">
                  <div class="field">
                    <span class="label">运动强度</span>
                    <span class="val">中</span>
                  </div>
                  <div class="field">
                    <span class="label">运动时长（分钟）</span>
                    <span class="val">30</span>
                  </div>
                  <div class="field">
                    <span class="label">每次个数（个）</span>
                    <span class="val">150</span>
                  </div>
                  <!--<div class="field">
                    <span class="label">每周频率（次/周）</span>
                    <span class="val">5</span>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="other-panel">
      <div class="tit">当日目标</div>
      <div class="today-targets">
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/motion_icon.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">跳绳</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>85分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>跳绳500个</span>
              <span>100/500次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/yangwoqizuo.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">仰卧起坐</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>5分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>仰卧起坐30个</span>
              <span>20/30次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 30%"></div>
              <span class="val">30%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>20次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 40%"></div>
              <span class="val">40%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dob-chart-box" id="cc">
      <div class="left">
        <div id="todayActStrengthChart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div class="chart-tabs">
          <span class="active">跳绳</span>
          <span>立定跳远</span>
        </div>
        <div class="sub-chart-box">
          <div id="actCompleteRateChart" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>

    <div class="other-panel">
      <div class="tit">本周目标</div>
      <div class="today-targets">
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/motion_icon.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">跳绳</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>85分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>跳绳500个</span>
              <span>100/500次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/yangwoqizuo.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">仰卧起坐</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>5分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>仰卧起坐30个</span>
              <span>20/30次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 30%"></div>
              <span class="val">30%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>20次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 40%"></div>
              <span class="val">40%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dob-chart-box">
      <div class="left">
        <div class="tit">平均运动强度</div>
        <div id="avgActStrengthChart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div class="chart-tabs">
          <span class="active">跳绳</span>
          <span>立定跳远</span>
        </div>
        <div class="sub-chart-box">
          <div id="actCompleteRateChart2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>

    <div class="other-panel">
      <div class="tit">本期目标</div>
      <div class="today-targets current-period">
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/actrun.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span class="status">锻炼中</span>
              <span class="distince">距离结束还有5天</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>85分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dob-chart-box">
        <div class="left">
            <div id="exerciseIntensityChart" style="width: 100%; height: 100%"></div>
        </div>
        <div class="right">
            <div id="completeRateChart" style="width: 100%; height: 100%"></div>
        </div>
    </div>
    <div class="sign-in-records">
        <div class="tit">打卡记录</div>
        <div class="types">
            <span class="no-sign">未打卡</span>
            <span class="no-cpltoday-target">未完成当日目标</span>
            <span class="cpltoday-target">完成当日目标</span>
            <span class="exceed">超过目标30%</span>
        </div>
        <div class="sign-calendars">
           <div class="calendar-item" v-for="i in 7" :key="i">
               <div class="tit">
                   2021年{{i+2}}月
               </div>
               <table>
                   <thead>
                       <tr>
                           <th>日</th>
                           <th>一</th>
                           <th>二</th>
                           <th>三</th>
                           <th>四</th>
                           <th>五</th>
                           <th>六</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td><a class="other-day">31</a></td>
                           <td><a class="cpl-clr">1</a></td>
                           <td><a class="no-sign-clr">2</a></td>
                           <td><a class="cpl-clr">3</a></td>
                           <td><a class="cpl-clr">4</a></td>
                           <td><a class="cpl-clr">5</a></td>
                           <td><a class="no-cpl-clr">6</a></td>
                        </tr>
                       <tr>
                           <td><a class="cpl-clr">7</a></td>
                           <td><a class="cpl-clr">8</a></td>
                           <td><a class="no-sign-clr">9</a></td>
                           <td><a class="cpl-clr">10</a></td>
                           <td><a class="no-cpl-clr">11</a></td>
                           <td><a class="no-sign-clr">12</a></td>
                           <td><a class="exceed-clr">13</a></td>
                        </tr>
                       <tr>
                           <td><a class="cpl-clr">14</a></td>
                           <td><a class="no-sign-clr">15</a></td>
                           <td><a class="cpl-clr">16</a></td>
                           <td><a class="cpl-clr">17</a></td>
                           <td><a class="cpl-clr">18</a></td>
                           <td><a class="no-cpl-clr">19</a></td>
                           <td><a class="exceed-clr">20</a></td>
                        </tr>
                       <tr>
                           <td><a class="cpl-clr">21</a></td>
                           <td><a class="no-cpl-clr">22</a></td>
                           <td><a class="cpl-clr">23</a></td>
                           <td><a class="no-sign-clr">24</a></td>
                           <td><a class="cpl-clr">25</a></td>
                           <td><a class="cpl-clr">26</a></td>
                           <td><a class="cpl-clr">27</a></td>
                        </tr>
                       <tr>
                           <td><a class="exceed-clr">28</a></td>
                           <td><a class="other-day">1</a></td>
                           <td><a class="other-day">2</a></td>
                           <td><a class="other-day">3</a></td>
                           <td><a class="other-day">4</a></td>
                           <td><a class="other-day">5</a></td>
                           <td><a class="other-day">6</a></td>
                        </tr>
                   </tbody>
               </table>
           </div> 
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from '_echarts@5.2.2@echarts'

export default {
  data() {
    return {
      todayActStrengthChart: null,
      completeRateChart:null,
      exerciseIntensityChart:null
    };
  },
  mounted() {
    let that=this;
    console.log('echarts')
    console.log(echarts)
    this.$nextTick(()=>{
        that.initActCompleteRateChart();
        that.initTodayActStrengthChart();
        that.initCompleteRateChart();
        that.initExerciseIntensityChart();
    })
  },
  methods: {
    initActCompleteRateChart() {
      let _actCompleteRateChart = echarts.init(
        document.getElementById("actCompleteRateChart")
      );
      let _actCompleteRateChart2 = echarts.init(
        document.getElementById("actCompleteRateChart2")
      );
      let _avgActStrengthChart = echarts.init(
        document.getElementById("avgActStrengthChart")
      );

      let data={
        '运动强度':120,
        '运动频率':150,
        '运动时长':90
      }
      let option = {
        title: {
          text: "运动完成率",
          x:'25%',
          y:'73%',
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize:18
          },
        },
        legend:{
          show:true,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function(params,b) {
            return params+'\n\n'+(((data[params]/180).toFixed(2)*100))+'%'
          },
          textStyle:{
            fontSize:14
          },
          data:[{name:'运动强度'},{name:'运动频率'},{name:'运动时长'}]
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name:'运动强度',
            endAngle: 0,
            center: ["32%", "78%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE"
              }
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#A3E0D6"]],
                width: 18
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120
              }
            ]
          },
          {
            type: "gauge",
            name:'运动频率',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "80%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#AFD2F3"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 150
              },
            ],
          },
          {
            type: "gauge",
            name:'运动时长',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "60%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#F3AF5C",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#EFD9B0"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 90
              },
            ]
          }
        ]
      };

      _actCompleteRateChart.setOption(option);
      _actCompleteRateChart2.setOption(option);

      let avgOption=Object.assign({},option);
      _avgActStrengthChart.setOption(avgOption);

      window.addEventListener("resize", () => {
        _actCompleteRateChart.resize();
        _actCompleteRateChart2.resize();
        _avgActStrengthChart.resize();
      });
    },
    initTodayActStrengthChart() {
      this.todayActStrengthChart = echarts.init(
        document.getElementById("todayActStrengthChart")
      );
      console.log(this.todayActStrengthChart);
      let colors=['#4DBDAE','#659EED','#F3AF5C'];
      this.todayActStrengthChart.setOption({
        title:{
            text:'当日项目运动强度',
            textStyle:{
                color:'#2F5A54',
                fontWeight:500,
                fontSize:24
            }
        },
        grid:{
          left:0,
          right:0,
          bottom:0,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["跑步", "跳绳", "仰卧起坐"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000000",
              opacity: 0.06,
            },
          },
          axisLabel:{
            textStyle :{
                color:'rgba(0, 0, 0, 0.25)',
                fontSize:18
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          interval:25,
          max:100,
          axisTick:{
              show:false
          },
          axisLabel:{
              formatter: '{value} %' , 
                textStyle :{
                    color:'rgba(0, 0, 0, 0.25)',
                    fontSize:18
                }
          }
        },
        series: [
          {
            data: [28, 100, 55],
            type: "bar",
            axisTick: {
              show: false,
            },
            barWidth: 10,
            showBackground:false,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                shadowBlur:5,
                shadowOffsetX:5,
                shadowOffsetY:0,
                color:function(params){
                    return colors[params.dataIndex]
                },
                shadowColor: '#CBF9F2'
              }
            },
          },
        ],
      });
    },
    initCompleteRateChart(){
        this.todayActStrengthChart = echarts.init(
            document.getElementById("completeRateChart")
        );
       var dataname=['第一阶段','第二阶段','第三阶段','第四阶段','第五阶段']
        var datamax=[20,20,20,20,20,20]
        var datavaule=[9,16,16,15,12,8] 
        var datavaule1=[6,8,10,6,5,8]

        var indicator = []
        for (var i = 0; i < dataname.length; i++) {
            indicator.push({
                name: dataname[i],
                max: datamax[i],
            })
        }

        let option = {
            title:{
                text:'完成率分析',
                textStyle:{
                    color:'#2F5A54',
                    fontWeight:500,
                    fontSize:24
                }
            },
            tooltip: {
                show: true,
                trigger: "item",
            },
            legend: {
                data: ['当前运动强度','目标强度'],
                type: "scroll",
                orient:'vertical',
                icon:"circle",
                right: '100',
                top: 'center',
                itemGap: 14,
                itemWidth: 14,
                itemHeight: 14,
                textStyle: {
                    fontSize: '15',
                    color: '#656565',
                },

            },
            radar: {
                center: ["30%", "60%"],
                radius: "65%",
                startAngle: 90,
                splitNumber: 5,
                splitArea: {
                    areaStyle: {
                        color: [ '#FFFFFF', '#F5F9FF', ].reverse(),
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#D2E4F8"
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#D2E4F8"
                    }
                },
                name: {
                    formatter: '{value}',
                    textStyle: {
                    color: '#C6D4D0' , 
                    fontSize: 15,
                    },
                },
                indicator: indicator
            },
            series: [{
                name: "当前运动强度",
                type: "radar",
                symbol: "none",
                symbolSize:6,
                areaStyle: {
                    normal: {
                        color: '#659EED',
                    }
                },
                itemStyle: {
                    color: '#659EED',
                },
                lineStyle: {
                    normal: {
                        color: "#659EED",
                        width:1
                    }
                },
                data: [datavaule]
            },{
                name: "目标强度",
                type: "radar",
                symbol: "none",
                symbolSize:6,
                areaStyle: {
                    normal: {
                        color: '#4DBDAE',
                    }
                },
                itemStyle: {
                    color: '#4DBDAE',
                },
                lineStyle: {
                    normal: {
                        color: "#4DBDAE",
                        width:1
                    }
                },
                data: [datavaule1]
            }]
        };
        this.todayActStrengthChart.setOption(option)
    },
    initExerciseIntensityChart(){
        this.exerciseIntensityChart = echarts.init(
        document.getElementById("exerciseIntensityChart")
      );

      let option = {
            title: {
                text:'运动强度',
                textStyle:{
                    color:'#2F5A54',
                    fontWeight:500,
                    fontSize:24
                }
            },
            color: [new echarts.graphic.LinearGradient(0, 0, 0,0.5, [{
                                    offset: 0,
                                    color: '#AD4DBD'
                                }, {
                                    offset: .5,
                                    color: '#9C45E2'
                                }, {
                                    offset: 1,
                                    color: '#E844B6'
                                }]),new echarts.graphic.LinearGradient(0, 0, 0,0.5, [{
                                    offset: 0,
                                    color: '#4DBDAE'
                                }, {
                                    offset: .5,
                                    color: '#4595E2'
                                }, {
                                    offset: 1,
                                    color: '#4490E8'
                                }])],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    },
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            grid: {
                left:0,
                right:0,
                bottom:0,
                containLabel: true
            },
            legend: {
                data: ['各阶段运动强度', '各阶段目标强度'],
                orient: 'horizontal',
                icon: "roundRect",
                show: true,
                right:'20%',
                top:10
            },
            xAxis: {
                type: 'category',
                data: ['第一阶段', '第二阶段', '第三阶段'],
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel:{
                    textStyle :{
                        color:'rgba(0, 0, 0, 0.25)',
                        fontSize:18
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#999',
                    textStyle: {
                        fontSize: 12
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#F3F4F4'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel:{
                    textStyle :{
                        color:'rgba(0, 0, 0, 0.25)',
                        fontSize:18
                    }
                }
            },
            series: [{
                    name: '各阶段运动强度',
                    type: 'line',
                    smooth: true,
                    symbol: "none", //去掉圆点
                    data: [12,11,6],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width:5,// 0.1的线条是非常细的了
                                color:new echarts.graphic.LinearGradient(0, 0, 0,0.5, [{
                                    offset: 0,
                                    color: '#AD4DBD'
                                }, {
                                    offset: .5,
                                    color: '#9C45E2'
                                }, {
                                    offset: 1,
                                    color: '#E844B6'
                                }]),//线条渐变色
                            }
                        }
                    }
                },
                {
                    name: '各阶段目标强度',
                    type: 'line',
                    symbol: "none", //去掉圆点
                    smooth: true,
                    data: [9,11,13],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                            width:5,// 0.1的线条是非常细的了
                            color:new echarts.graphic.LinearGradient(0, 0, 0,0.5, [{
                                    offset: 0,
                                    color: '#4DBDAE'
                                }, {
                                    offset: .5,
                                    color: '#4595E2'
                                }, {
                                    offset: 1,
                                    color: '#4490E8'
                                }]),//线条渐变色
                            }
                        }
                    }
                }
            ]
        };

        this.exerciseIntensityChart.setOption(option);
    }
  }
};
</script>

<style lang="scss">
.heal-guidance-program {
  padding: 20px;
  background: #dbf3ed;
  height: 100%;
  >div{
    
  width:1513px;
  }
  .my-program {
    .cons-item {
      margin-bottom: 36px;
      padding-right:32px;
      display: flex;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      height: 402px;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width: max-content;
      .main-item {
        min-width: 323px;
        width: 323px;
        min-height: 414px;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
            max-height: 200px;
            overflow-y: auto;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response {
        min-width:1102px;
        max-width:1102px;
        overflow-y: hidden;
        .sub-items {
          display: inline-flex;
        }
      }
      .sub-items {
        display: flex;
        padding: 27px;
        padding-right:0px !important;
        padding-left: 0px;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 12px;
          }
          .childrens {
            display: flex;
            align-items: center;
            .child-item {
              min-width: 283px;
              margin-right:12px !important;
            }
            .child-item:last-child {
              margin-right: 0px !important;
            }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-h-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              //background-image: url("../../../assets/img/motion_icon.png");
              //background-repeat: no-repeat;
              //background-size: 56px 56px;
              //background-position: 10%;
              display: flex;
              align-items: center;
              .img-box{
                width:56px;height:56px;
                display: flex;
                align-items: center;
                margin-left:24px;
                margin-right:20px;
                img{
                  width:100%;
                  height:100%;
                }
              }
              .str-box {
                // margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height:18px;
                margin-bottom:6px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height:24px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child {
          margin-right: 0px;
        }
      }
    }
  }
  .other-panel {
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    .today-targets {
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .main-item {
          width: 350px;
          height: 116px;
          background: #edfdf9;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 23px 29px;
          display: flex;
          align-items: center;
          .act-con {
            margin-left: 27px;
            span {
              display: block;
              font-size: 18px;
              color: #2f5a54;
            }
            .name {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
        .item {
          width: 350px;
          height: 116px;
          border-radius: 20px;
          margin-left: 36px;
          color: #fff;
          .top-desc {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            margin-left: 80px;
            margin-right:20px !important;
          }
          .progress-bar {
            position: relative;
            height: 10px;
            border-radius: 6px;
            width: calc(100% - 150px);
            margin-left: 80px;
            margin-right: 10px;
            margin-top: 24px;
            .bar {
              position: absolute;
              left: 0px;
              top: 0px;
              height: 100%;
              border-radius: 6px;
              background: #fff;
              transition: 0.2s all linear;
            }
            .val {
              position: absolute;
              right: -50px;
              top: -8px !important;
              font-size:18px;
            }
          }
          .progress-bar1 {
            background: #B28145;
          }
          .progress-bar2 {
            background: #5d8fd5;
          }
          .progress-bar3 {
            background: #4D9E95;
          }
        }
        .item:first-child {
          margin-left: 0px;
        }
        .sub-item1 {
          background-color: #f3af5c;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/acttimeline.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item2 {
          background-color: #659eed;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actnum.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item3 {
          background-color: #4dbdae;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actqd.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
      }
    }
    .current-period {
      .row {
        .main-item {
          width: 740px;
          .act-con {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .status {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
      }
    }
  }
  .dob-chart-box {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    .tit{
          font-size: 24px;
          color: #2f5a54;
          font-weight: 500;
          margin-bottom: 30px
    }
    > div {
      width: 740px;
      height: 414px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      padding: 36px 30px;
    }
    .right {
      margin-left: 30px;
      width:741px;
      .chart-tabs {
        color: #2f5a54;
        font-size: 24px;
        font-weight: 500;
        span {
          cursor: pointer;
          margin-right: 31px;
          position: relative;
        }
        .active {
          color: #4dbdae;
          &:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 100%;
            height: 4px;
            background: #4dbdae;
            border-radius: 1px;
          }
        }
      }
      .sub-chart-box{
        height:100%;
        width:100%;
      }
    }
  }
  .sign-in-records{
      width: 1512px;
    background: #EDFDF9;
    box-shadow: 5px 5px 8px 0px rgba(201,231,225,1), -5px -5px 8px 0px rgba(255,255,255,0.5);
    border-radius: 25px;
    padding:0px 29px;
    padding-bottom:30px;
      .tit{
        font-size: 24px;
        font-weight: 500;
        color: #2F5A54;
        margin-top:48px;
        display: inline-block;
      }
      .types{
          margin-top:26px;
          display: flex;
          span{
              font-size:14px;
              color:#2F5A54;
              position: relative;
              margin-right:44px;
              padding-left:35px;
              cursor: pointer;
          }

          .no-sign:after{
              content:'';
              height:6px;
              position: absolute;
              width:24px;
              bottom:5px;
              border-radius:6px;
              left:0px;
              background:#DDDDDD;
          }
          .no-cpltoday-target:after{
              content:'';
              height:6px;
              position: absolute;
              width:24px;
              bottom:5px;
              border-radius:6px;
              left:0px;
              background:#F3AF5C;
          }
          .cpltoday-target:after{
              content:'';
              height:6px;
              position: absolute;
              width:24px;
              bottom:5px;
              border-radius:6px;
              left:0px;
              background:#4CBD8E;
          }
          .exceed:after{
              content:'';
              height:6px;
              position: absolute;
              width:24px;
              bottom:5px;
              border-radius:6px;
              left:0px;
              background:#4493E5;
          }
      }
      .sign-calendars{
          display: flex;
          overflow-x:auto;
          overflow-y:hidden;
        padding-bottom:30px;
      }
      .calendar-item{
          margin-right:30px;
          .tit{
              margin-left:10px;
          }
          table{
              border-collapse: collapse;
              border-spacing:0px;
          }
          table tr th{
              font-size:12px;
              color:#A8B4B1;
                  width:54px;
                  text-align: center;
          }
          table tr{
              line-height:50px;
              td{
                 padding:0px 10px;
                  text-align: center;
                  width:54px;
              }
          }
          table tr td a{
              color:#000000;
              font-size:16px;
              position: relative;
              display: inline-block;
              text-align: center;
              width:100%;
          }
          .other-day{
              color:#A8B4B1;
          }
          .cpl-clr:after{
              content:'';
              height:6px;
              position: absolute;
              width:100%;
              bottom:-5px;
              border-radius:6px;
              left:0px;
              background:#4CBD8E;
          }
          .no-sign-clr:after{
              content:'';
              height:6px;
              position: absolute;
              width:100%;
              bottom:-5px;
              border-radius:6px;
              left:0px;
              background:#DDDDDD;
          }
          .no-cpl-clr:after{
              content:'';
              height:6px;
              position: absolute;
              width:100%;
              bottom:-5px;
              border-radius:6px;
              left:0px;
              background:#F3AF5C;
          }
          .exceed-clr:after{
              content:'';
              height:6px;
              position: absolute;
              width:100%;
              bottom:-5px;
              border-radius:6px;
              left:0px;
              background:#4493E5;
          }
      }
  }
}
</style>